<template>
  <Card v-style="'boxstyle_bg_1'">
    <template #header>
      <div class="header">
        <img src="@/assets/webmasterData/icon1.png" alt="" />
        <span>网站排名</span>
      </div>
    </template>
    <!-- <div class="scroll_y h_100b">
      <div id="main" ref="main"></div>
    </div> -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="main-box" id="main" ref="main"></div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRefs, defineProps, watch } from "vue";
import * as echarts from "echarts";
import Card from "@/components/Card";
import { echartsAutoPlay } from "@/utils/echarts";

import store from "@/store";

const main = ref();

let urlPage = 1;
let urlTotalPage = 1;
let date = 'day';

import Swiper from 'swiper';   // 引入库
import 'swiper/css/swiper.css'; // 引入样式文件，注意5和6版本的样式文件不一致

import { bigDataApi } from "@/api/bigData";

const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    urlPage = 1;
    getRankingUrlData();
  },
  {
    immediate: true,
  }
);
    
onMounted(() => {
  // 获取网站排名
  // getRankingUrlData();
  // 轮播
  var mySwiper = new Swiper('.swiper-container', {
   on: {
      touchEnd: function (swiper) {
        console.log(swiper);
        if(urlPage >= urlTotalPage){
          urlPage = 1
        }else{
          urlPage ++;
        }
        getRankingUrlData();
      },
    }
  });
});

async function getRankingUrlData() {
  //is_asc  0 降序， 1 升序
  //date  day 日，  week  周，  month 月 默认 day
  const result = await bigDataApi.rankingUrl({is_asc: 1, date: date, page: urlPage, limit: 5, token: store.getters.user.token });
  const { data } = result;
  console.log(data)
  // 初始化图表
  if(data.last_page){
    urlTotalPage = data.last_page
  }
  setEcharts(data.data);
}

function setEcharts(data) {
  if(data.length > 0){
    var xDataList = []
    var yDataList = []
    data.forEach((item,index) => {
      xDataList.push(item.url_count);
      yDataList.push(item.host);
    });
   var myChart = echarts.init(main.value);
  }
  var option = {
    tooltip: {
      trigger: "axis",
      extraCssText: "z-index:999",
      confine: true,
      backgroundColor: "rgba(255,255,255,0.8)",
    },
    grid: {
      top: "0",
      left: '-30%',
      right: "15%",
      bottom: "40%",
      containLabel: true,
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        inverse: true,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: yDataList,
        axisLabel: {
          width: 300,
          margin: 100,
          color: "#CBD2D5",
          fontSize: 14,
          align: "left",
          formatter: function (value: string, index: number) {
            var maxLength = 8;
            var valLength = value.length;
            var rowN = Math.ceil(valLength / maxLength);
            if (rowN > 1) {
              return `${(urlPage - 1) * 5 + (index + 1)}  ` + value.substring(0, 8) + "...";
            } else {
              return `${(urlPage - 1) * 5 + (index + 1)}  ` + value;
            }
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 10, // 柱子宽度
        label: {
          show: true,
          position: "right", // 位置
          color: "#CBD2D5",
          fontSize: 12,
          formatter: function (data: any) {
            return data.value;
          },
        }, // 柱子上方的数值
        itemStyle: {
          barBorderRadius: 20,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#00ACFA" },
            { offset: 1, color: "#0070EE" },
          ]),
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.3)",
        },
        data: xDataList,
      },
    ],
  };

  myChart.setOption(option);
  echartsAutoPlay(option, myChart);
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}
.main-box {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
.swiper-container {
  width: 100%;
  height: 100%;
  min-height: 200px;
  .swiper-slide {
    width: 100% !important;
  }
}
</style>
